<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 关于AngularJS 与 Angular 概念的快速参考</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="live-example-live-example-module-es2015.a8023d1b084857ef476b.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-ajs-quick-reference sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self"><span>服务提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self"><span>DI 提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="true"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 expanded selected ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="true"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 expanded selected ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter-io.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-ajs-quick-reference"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/ajs-quick-reference.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="angularjs-to-angular-concepts-quick-reference" translation-result="on">关于AngularJS 与 Angular 概念的快速参考<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#angularjs-to-angular-concepts-quick-reference"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="模板基础"><a href="guide/ajs-quick-reference#template-basics">模板基础</a></li><li class="h3 ng-star-inserted" title="绑定/插值"><a href="guide/ajs-quick-reference#bindingsinterpolation">绑定/插值</a></li><li class="h3 ng-star-inserted" title="绑定/插值"><a href="guide/ajs-quick-reference#bindingsinterpolation-1">绑定/插值</a></li><li class="h3 secondary ng-star-inserted" title="过滤器"><a href="guide/ajs-quick-reference#filters">过滤器</a></li><li class="h3 secondary ng-star-inserted" title="管道"><a href="guide/ajs-quick-reference#pipes">管道</a></li><li class="h3 secondary ng-star-inserted" title="局部变量"><a href="guide/ajs-quick-reference#local-variables">局部变量</a></li><li class="h3 secondary ng-star-inserted" title="输入变量"><a href="guide/ajs-quick-reference#input-variables">输入变量</a></li><li class="h2 secondary ng-star-inserted" title="模板指令"><a href="guide/ajs-quick-reference#template-directives">模板指令</a></li><li class="h3 secondary ng-star-inserted" title="ng-app"><a href="guide/ajs-quick-reference#ng-app">ng-app</a></li><li class="h3 secondary ng-star-inserted" title="引导"><a href="guide/ajs-quick-reference#bootstrapping">引导</a></li><li class="h3 secondary ng-star-inserted" title="ng-class"><a href="guide/ajs-quick-reference#ng-class">ng-class</a></li><li class="h3 secondary ng-star-inserted" title="ngClass"><a href="guide/ajs-quick-reference#ngclass">ngClass</a></li><li class="h3 secondary ng-star-inserted" title="ng-click"><a href="guide/ajs-quick-reference#ng-click">ng-click</a></li><li class="h3 secondary ng-star-inserted" title="绑定到 click 事件"><a href="guide/ajs-quick-reference#bind-to-the-click-event">绑定到 <code>click</code> 事件</a></li><li class="h3 secondary ng-star-inserted" title="ng-controller"><a href="guide/ajs-quick-reference#ng-controller">ng-controller</a></li><li class="h3 secondary ng-star-inserted" title="组件装饰器"><a href="guide/ajs-quick-reference#component-decorator">组件装饰器</a></li><li class="h3 secondary ng-star-inserted" title="ng-hide"><a href="guide/ajs-quick-reference#ng-hide">ng-hide</a></li><li class="h3 secondary ng-star-inserted" title="绑定到 hidden 属性"><a href="guide/ajs-quick-reference#bind-to-the-hidden-property">绑定到 <code>hidden</code> 属性</a></li><li class="h3 secondary ng-star-inserted" title="ng-href"><a href="guide/ajs-quick-reference#ng-href">ng-href</a></li><li class="h3 secondary ng-star-inserted" title="绑定到 href 属性"><a href="guide/ajs-quick-reference#bind-to-the-href-property">绑定到 <code>href</code> 属性</a></li><li class="h3 secondary ng-star-inserted" title="ng-if"><a href="guide/ajs-quick-reference#ng-if">ng-if</a></li><li class="h3 secondary ng-star-inserted" title="*ngIf"><a href="guide/ajs-quick-reference#ngif">*ngIf</a></li><li class="h3 secondary ng-star-inserted" title="ng-model"><a href="guide/ajs-quick-reference#ng-model">ng-model</a></li><li class="h3 secondary ng-star-inserted" title="ngModel"><a href="guide/ajs-quick-reference#ngmodel">ngModel</a></li><li class="h3 secondary ng-star-inserted" title="ng-repeat"><a href="guide/ajs-quick-reference#ng-repeat">ng-repeat</a></li><li class="h3 secondary ng-star-inserted" title="*ngFor"><a href="guide/ajs-quick-reference#ngfor">*ngFor</a></li><li class="h3 secondary ng-star-inserted" title="ng-show"><a href="guide/ajs-quick-reference#ng-show">ng-show</a></li><li class="h3 secondary ng-star-inserted" title="绑定到 hidden 属性"><a href="guide/ajs-quick-reference#bind-to-the-hidden-property-1">绑定到 <code>hidden</code> 属性</a></li><li class="h3 secondary ng-star-inserted" title="ng-src"><a href="guide/ajs-quick-reference#ng-src">ng-src</a></li><li class="h3 secondary ng-star-inserted" title="绑定到 src 属性"><a href="guide/ajs-quick-reference#bind-to-the-src-property">绑定到 <code>src</code> 属性</a></li><li class="h3 secondary ng-star-inserted" title="ng-style"><a href="guide/ajs-quick-reference#ng-style">ng-style</a></li><li class="h3 secondary ng-star-inserted" title="ngStyle"><a href="guide/ajs-quick-reference#ngstyle">ngStyle</a></li><li class="h3 secondary ng-star-inserted" title="ng-switch"><a href="guide/ajs-quick-reference#ng-switch">ng-switch</a></li><li class="h3 secondary ng-star-inserted" title="ngSwitch"><a href="guide/ajs-quick-reference#ngswitch">ngSwitch</a></li><li class="h2 secondary ng-star-inserted" title="过滤器/管道"><a href="guide/ajs-quick-reference#filterspipes">过滤器/管道</a></li><li class="h3 secondary ng-star-inserted" title="currency"><a href="guide/ajs-quick-reference#currency">currency</a></li><li class="h3 secondary ng-star-inserted" title="currency"><a href="guide/ajs-quick-reference#currency-1">currency</a></li><li class="h3 secondary ng-star-inserted" title="date"><a href="guide/ajs-quick-reference#date">date</a></li><li class="h3 secondary ng-star-inserted" title="date"><a href="guide/ajs-quick-reference#date-1">date</a></li><li class="h3 secondary ng-star-inserted" title="filter"><a href="guide/ajs-quick-reference#filter">filter</a></li><li class="h3 secondary ng-star-inserted" title="没了"><a href="guide/ajs-quick-reference#none">没了</a></li><li class="h3 secondary ng-star-inserted" title="json"><a href="guide/ajs-quick-reference#json">json</a></li><li class="h3 secondary ng-star-inserted" title="json"><a href="guide/ajs-quick-reference#json-1">json</a></li><li class="h3 secondary ng-star-inserted" title="limitTo"><a href="guide/ajs-quick-reference#limitto">limitTo</a></li><li class="h3 secondary ng-star-inserted" title="slice"><a href="guide/ajs-quick-reference#slice">slice</a></li><li class="h3 secondary ng-star-inserted" title="lowercase"><a href="guide/ajs-quick-reference#lowercase">lowercase</a></li><li class="h3 secondary ng-star-inserted" title="lowercase"><a href="guide/ajs-quick-reference#lowercase-1">lowercase</a></li><li class="h3 secondary ng-star-inserted" title="number"><a href="guide/ajs-quick-reference#number">number</a></li><li class="h3 secondary ng-star-inserted" title="number"><a href="guide/ajs-quick-reference#number-1">number</a></li><li class="h3 secondary ng-star-inserted" title="orderBy"><a href="guide/ajs-quick-reference#orderby">orderBy</a></li><li class="h3 secondary ng-star-inserted" title="没了"><a href="guide/ajs-quick-reference#none-1">没了</a></li><li class="h2 secondary ng-star-inserted" title="模块/控制器/组件"><a href="guide/ajs-quick-reference#modulescontrollerscomponents">模块/控制器/组件</a></li><li class="h3 secondary ng-star-inserted" title="IIFE"><a href="guide/ajs-quick-reference#iife">IIFE</a></li><li class="h3 secondary ng-star-inserted" title="没了"><a href="guide/ajs-quick-reference#none-2">没了</a></li><li class="h3 secondary ng-star-inserted" title="Angular 模块"><a href="guide/ajs-quick-reference#angular-modules">Angular 模块</a></li><li class="h3 secondary ng-star-inserted" title="NgModules"><a href="guide/ajs-quick-reference#ngmodules">NgModules</a></li><li class="h3 secondary ng-star-inserted" title="控制器注册"><a href="guide/ajs-quick-reference#controller-registration">控制器注册</a></li><li class="h3 secondary ng-star-inserted" title="组件装饰器"><a href="guide/ajs-quick-reference#component-decorator-1">组件装饰器</a></li><li class="h3 secondary ng-star-inserted" title="控制器函数"><a href="guide/ajs-quick-reference#controller-function">控制器函数</a></li><li class="h3 secondary ng-star-inserted" title="组件类"><a href="guide/ajs-quick-reference#component-class">组件类</a></li><li class="h3 secondary ng-star-inserted" title="依赖注入"><a href="guide/ajs-quick-reference#dependency-injection">依赖注入</a></li><li class="h3 secondary ng-star-inserted" title="依赖注入"><a href="guide/ajs-quick-reference#dependency-injection-1">依赖注入</a></li><li class="h2 secondary ng-star-inserted" title="样式表"><a href="guide/ajs-quick-reference#style-sheets">样式表</a></li><li class="h3 secondary ng-star-inserted" title="Link 标签"><a href="guide/ajs-quick-reference#link-tag">Link 标签</a></li><li class="h3 secondary ng-star-inserted" title="样式配置"><a href="guide/ajs-quick-reference#styles-configuration">样式配置</a></li><li class="h3 secondary ng-star-inserted" title="StyleUrls"><a href="guide/ajs-quick-reference#styleurls">StyleUrls</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="angularjs-to-angular-concepts-quick-reference">AngularJS to Angular concepts: Quick reference<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#angularjs-to-angular-concepts-quick-reference"><i class="material-icons">link</i></a></h1><a id="top"></a><p translation-result="on"><em>Angular</em> 这个名字专指现在和未来的 Angular 版本，而 <em>AngularJS</em> 专指 Angular 的所有 v1.x 版本。</p><p translation-origin="off"><em>Angular</em> is the name for the Angular of today and tomorrow. <em>AngularJS</em> is the name for all v1.x versions of Angular.</p><p translation-result="on">本章提供了一个快速的参考指南，指出一些常用的 AngularJS 语法及其在 Angular 中的等价物。</p><p translation-origin="off">This guide helps you transition from AngularJS to Angular by mapping AngularJS syntax to the equivalent Angular syntax.</p><p translation-result="on"><strong>参见<live-example name="ajs-quick-reference" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="在线例子" href="generated/live-examples/ajs-quick-reference/stackblitz.html">在线例子</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/ajs-quick-reference/ajs-quick-reference.zip">下载范例</a></span></span></span></live-example>以学习 Angular 语法</strong></p><p translation-origin="off"><strong>See the Angular syntax in this<live-example name="ajs-quick-reference" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="在线例子" href="generated/live-examples/ajs-quick-reference/stackblitz.html">在线例子</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/ajs-quick-reference/ajs-quick-reference.zip">下载范例</a></span></span></span></live-example></strong>.</p><h2 id="template-basics" translation-result="on">模板基础<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#template-basics"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="template-basics">Template basics<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#template-basics"><i class="material-icons">link</i></a></h2><p translation-result="on">模板是 Angular 应用中的门面部分，它是用 HTML 写的。下表中是一些 AngularJS 中的关键模板特性及其在 Angular 中的等价语法。</p><p translation-origin="off">Templates are the user-facing part of an Angular application and are written in HTML. The following table lists some of the key AngularJS template features with their equivalent Angular template syntax.</p><table width="100%"><colgroup><col width="50%"><col width="50%"></colgroup><tbody><tr><th><p>AngularJS</p></th><th><p>Angular</p></th></tr><tr style=""><td><h3 id="bindingsinterpolation" translation-result="on">绑定/插值<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bindingsinterpolation"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bindingsinterpolation">Bindings/interpolation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bindingsinterpolation"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">Your favorite hero is: {{vm.favoriteHero}}</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="typ">Your</span><span class="pln"> favorite hero </span><span class="kwd">is</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{{</span><span class="pln">vm</span><span class="pun">.</span><span class="pln">favoriteHero</span><span class="pun">}}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，花括号中的表达式代表单向绑定。 它把元素的值绑定到了与模板相关控制器的属性上。</p><p translation-origin="off">In AngularJS, an expression in curly braces denotes one-way binding. This binds the value of the element to a property in the controller associated with this template.</p><p translation-result="on">当使用 <code>controller as</code> 语法时，该绑定需要用控制器的别名(<code>vm</code>)为前缀，这是因为你不得不通过它来指定绑定源。</p><p translation-origin="off">When using the <code>controller as</code> syntax, the binding is prefixed with the controller alias (<code>vm</code> or <code>$ctrl</code>) because you have to be specific about the source of the binding.</p></td><td><h3 id="bindingsinterpolation-1" translation-result="on">绑定/插值<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bindingsinterpolation-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bindingsinterpolation-1">Bindings/interpolation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bindingsinterpolation-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.html" region="interpolation" ng-version="9.0.0-rc.11"><div style="display:none">Your favorite hero is: {{favoriteHero}}</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="typ">Your</span><span class="pln"> favorite hero </span><span class="kwd">is</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{{</span><span class="pln">favoriteHero</span><span class="pun">}}</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，花括号中的模板表达式同样代表单向绑定。 它把元素的值绑定到了组件的属性上。 它绑定的上下文变量是隐式的，并且总是关联到组件。 所以，它不需要一个引用变量。</p><p translation-origin="off">In Angular, a template expression in curly braces still denotes one-way binding. This binds the value of the element to a property of the component. The context of the binding is implied and is always the associated component, so it needs no reference variable.</p><p translation-result="on">要了解更多，请参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#interpolation">插值</a>部分。</p><p translation-origin="off">For more information, see the <a href="guide/template-syntax#interpolation">Interpolation</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr><tr style=""><td><h3 id="filters" translation-result="on">过滤器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#filters"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="filters">Filters<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#filters"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.title | <a href="api/common/UpperCasePipe" class="code-anchor">uppercase</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.title | </span><a href="api/common/UpperCasePipe" class="code-anchor"><span class="pln">uppercase</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">要在 AngularJS 中过滤输出，使用管道字符(|)以及一个或多个过滤器。</p><p translation-origin="off">To filter output in AngularJS templates, use the pipe character (|) and one or more filters.</p><p translation-result="on">这个例子中把 <code>title</code> 属性过滤成了大写形式。</p><p translation-origin="off">This example filters the <code>title</code> property to uppercase.</p></td><td><h3 id="pipes" translation-result="on">管道<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#pipes"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="pipes">Pipes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#pipes"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="uppercase" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.title | <a href="api/common/UpperCasePipe" class="code-anchor">uppercase</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.title | </span><a href="api/common/UpperCasePipe" class="code-anchor"><span class="pln">uppercase</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，你使用类似的语法 —— 用管道字符(|)来过滤输出，但是现在直接把它叫做<strong>管道</strong>了。 很多(但不是所有)AngularJS 中的内置过滤器也成了 Angular 中的内置管道。</p><p translation-origin="off">In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them <strong>pipes</strong>. Many (but not all) of the built-in filters from AngularJS are built-in pipes in Angular.</p><p translation-result="on">请参见下面<a href="guide/ajs-quick-reference#filters-pipes">过滤器/管道</a>了解更多信息。</p><p translation-origin="off">For more information, see <a href="guide/ajs-quick-reference#filters-pipes">Filters/pipes</a> below.</p></td></tr><tr style=""><td><h3 id="local-variables" translation-result="on">局部变量<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#local-variables"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="local-variables">Local variables<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#local-variables"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr ng-repeat="movie in vm.movies"&gt; &lt;td&gt;{{movie.title}}&lt;/td&gt; &lt;/tr&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"movie in vm.movies"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.title}}</span><span class="tag">&lt;/td&gt;</span><span class="pln">
</span><span class="tag">&lt;/tr&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这里的 <code>movie</code> 是一个用户定义的局部变量</p><p translation-origin="off">Here, <code>movie</code> is a user-defined local variable.</p></td><td><h3 id="input-variables" translation-result="on">输入变量<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#input-variables"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="input-variables">Input variables<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#input-variables"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="local" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let movie of movies"&gt; &lt;td&gt;{{movie.title}}&lt;/td&gt; &lt;/tr&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let movie of movies"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.title}}</span><span class="tag">&lt;/td&gt;</span><span class="pln">
</span><span class="tag">&lt;/tr&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 有了真正的模板输入变量，它需要使用 <code>let</code> 关键字进行明确定义。</p><p translation-origin="off">Angular has true template input variables that are explicitly defined using the <code>let</code> keyword.</p><p translation-result="on">要了解更多信息，请参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#microsyntax">ngFor 微语法</a>部分。</p><p translation-origin="off">For more information, see the <a href="guide/template-syntax#microsyntax">ngFor micro-syntax</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr></tbody></table><h2 id="template-directives" translation-result="on">模板指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#template-directives"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="template-directives">Template directives<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#template-directives"><i class="material-icons">link</i></a></h2><p translation-result="on">AngularJS 为模板提供了七十多个内置指令。 在 Angular 中，它们很多都已经不需要了，因为 Angular 有了一个更加强大、快捷的绑定系统。 下面是一些 AngularJS 中的关键指令及其在 Angular 中的等价物。</p><p translation-origin="off">AngularJS provides more than seventy built-in directives for templates. Many of them aren't needed in Angular because of its more capable and expressive binding system. The following are some of the key AngularJS built-in directives and their equivalents in Angular.</p><table width="100%"><colgroup><col width="50%"><col width="50%"></colgroup><tbody><tr><th><p>AngularJS</p></th><th><p>Angular</p></th></tr><tr style=""><td><h3 id="ng-app">ng-app<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-app"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;body ng-app="movieHunter"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;body</span><span class="pln"> </span><span class="atn">ng-app</span><span class="pun">=</span><span class="atv">"movieHunter"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">应用的启动过程被称为<strong>引导</strong>。</p><p translation-origin="off">The application startup process is called <strong>bootstrapping</strong>.</p><p translation-result="on">虽然可以从代码中引导 Angular 应用， 但很多应用都是通过 <code>ng-app</code> 指令进行声明式引导的，只要给它一个应用模块的名字(<code>movieHunter</code>)就可以了。</p><p translation-origin="off">Although you can bootstrap an AngularJS app in code, many applications bootstrap declaratively with the <code>ng-app</code> directive, giving it the name of the application's module (<code>movieHunter</code>).</p></td><td><h3 id="bootstrapping" translation-result="on">引导<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bootstrapping"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bootstrapping">Bootstrapping<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bootstrapping"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/main.ts" header="main.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a> } from '@angular/core'; import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a>(); } <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule);</div><header class="ng-star-inserted">main.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/enableProdMode" class="code-anchor"><span class="pln">enableProdMode</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser-dynamic'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app/app.module'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> environment </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./environments/environment'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">environment</span><span class="pun">.</span><span class="pln">production</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><a href="api/core/enableProdMode" class="code-anchor"><span class="pln">enableProdMode</span></a><span class="pun">();</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pun">().</span><span class="pln">bootstrapModule</span><span class="pun">(</span><span class="typ">AppModule</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><br></p><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.module.1.ts" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln">      </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">  </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 没有引导指令。 总是要通过显式调用一个 <code>bootstrap</code> 函数，并传入应用模块的名字(<code>AppComponent</code>)来启动应用。</p><p translation-origin="off">Angular doesn't have a bootstrap directive. To launch the app in code, explicitly bootstrap the application's root module (<code>AppModule</code>) in <code>main.ts</code> and the application's root component (<code>AppComponent</code>) in <code>app.module.ts</code>.</p></td></tr><tr style=""><td><h3 id="ng-class">ng-class<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-class"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ng-class="{active: <a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a>}"&gt; &lt;div ng-class="{active: <a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a>, shazam: isImportant}"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-class</span><span class="pun">=</span><span class="atv">"{active: </span><a href="api/router/RouterLinkActive#isActive" class="code-anchor"><span class="atv">isActive</span></a><span class="atv">}"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-class</span><span class="pun">=</span><span class="atv">"{active: </span><a href="api/router/RouterLinkActive#isActive" class="code-anchor"><span class="atv">isActive</span></a><span class="atv">,
                   shazam: isImportant}"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-class</code> 指令会基于一个表达式来包含/排除某些 CSS 类。该表达式通常是一个“键-值”型的控制对象， 对象中的每一个键代表一个 CSS 类名，每一个值定义为一个返回布尔值的模板表达式。</p><p translation-origin="off">In AngularJS, the <code>ng-class</code> directive includes/excludes CSS classes based on an expression. That expression is often a key-value control object with each key of the object defined as a CSS class name, and each value defined as a template expression that evaluates to a Boolean value.</p><p translation-result="on">在第一个例子中，如果 <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> 为真，则 <code>active</code> 类被应用到那个元素上。</p><p translation-origin="off">In the first example, the <code>active</code> class is applied to the element if <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> is true.</p><p translation-result="on">就像第二个例子中所展示的那样，可以同时指定多个类。</p><p translation-origin="off">You can specify multiple classes, as shown in the second example.</p></td><td><h3 id="ngclass">ngClass<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ngclass"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="ngClass" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="{'active': <a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a>}"&gt; &lt;div [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="{'active': <a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a>, 'shazam': isImportant}"&gt; &lt;div [class.active]="<a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a>"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"{'active': </span><a href="api/router/RouterLinkActive#isActive" class="code-anchor"><span class="atv">isActive</span></a><span class="atv">}"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"{'active': </span><a href="api/router/RouterLinkActive#isActive" class="code-anchor"><span class="atv">isActive</span></a><span class="atv">,
                 'shazam': isImportant}"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">active</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"</span><a href="api/router/RouterLinkActive#isActive" class="code-anchor"><span class="atv">isActive</span></a><span class="atv">"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，<code><a href="api/common/NgClass" class="code-anchor">ngClass</a></code> 指令用类似的方式工作。 它根据一个表达式包含/排除某些 CSS 类。</p><p translation-origin="off">In Angular, the <code><a href="api/common/NgClass" class="code-anchor">ngClass</a></code> directive works similarly. It includes/excludes CSS classes based on an expression.</p><p translation-result="on">在第一个例子中，如果 <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> 为真，则 <code>active</code> 类被应用到那个元素上。</p><p translation-origin="off">In the first example, the <code>active</code> class is applied to the element if <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> is true.</p><p translation-result="on">就像第二个例子中所展示的那样，可以同时指定多个类。</p><p translation-origin="off">You can specify multiple classes, as shown in the second example.</p><p translation-result="on">Angular 还有<strong>类绑定</strong>，它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。</p><p translation-origin="off">Angular also has <strong>class binding</strong>, which is a good way to add or remove a single class, as shown in the third example.</p><p translation-result="on">要了解更多信息，参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#other-bindings">属性、CSS 类和样式绑定</a>部分。</p><p translation-origin="off">For more information see the <a href="guide/template-syntax#other-bindings">Attribute, class, and style bindings</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr><tr style=""><td><h3 id="ng-click">ng-click<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-click"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button ng-click="vm.toggleImage()"&gt; &lt;button ng-click="vm.toggleImage($event)"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">ng-click</span><span class="pun">=</span><span class="atv">"vm.toggleImage()"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">ng-click</span><span class="pun">=</span><span class="atv">"vm.toggleImage($event)"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-click</code> 指令指定当元素被点击时的自定义行为。</p><p translation-origin="off">In AngularJS, the <code>ng-click</code> directive allows you to specify custom behavior when an element is clicked.</p><p translation-result="on">在第一个例子中，如果用户点击了这个按钮，那么控制器的 <code>toggleImage()</code> 方法就会被执行，这个控制器是被 <code>controller as</code> 中指定的 <code>vm</code> 别名所引用的。</p><p translation-origin="off">In the first example, when the user clicks the button, the <code>toggleImage()</code> method in the controller referenced by the <code>vm</code> <code>controller as</code> alias is executed.</p><p translation-result="on">第二个例子演示了传入 <code>$event</code> 对象，它提供了事件的详情，并被传到控制器。</p><p translation-origin="off">The second example demonstrates passing in the <code>$event</code> object, which provides details about the event to the controller.</p></td><td><h3 id="bind-to-the-click-event" translation-result="on">绑定到 <code>click</code> 事件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-click-event"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bind-to-the-click-event">Bind to the <code>click</code> event<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-click-event"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="event-binding" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button (click)="toggleImage()"&gt; &lt;button (click)="toggleImage($event)"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"toggleImage()"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"toggleImage($event)"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">AngularJS 基于事件的指令在 Angular 中已经不存在了。 不过，可以使用<strong>事件绑定</strong>来定义从模板视图到组件的单向数据绑定。</p><p translation-origin="off">AngularJS event-based directives do not exist in Angular. Rather, define one-way binding from the template view to the component using <strong>event binding</strong>.</p><p translation-result="on">要使用事件绑定，把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。 然后 Angular 为这个目标时间设置事件处理器。当事件被触发时，这个处理器就会执行模板语句。</p><p translation-origin="off">For event binding, define the name of the target event within parenthesis and specify a template statement, in quotes, to the right of the equals. Angular then sets up an event handler for the target event. When the event is raised, the handler executes the template statement.</p><p translation-result="on">在第一个例子中，当用户点击此按钮时，相关组件中的 <code>toggleImage()</code> 方法就被执行了。</p><p translation-origin="off">In the first example, when a user clicks the button, the <code>toggleImage()</code> method in the associated component is executed.</p><p translation-result="on">第二个例子演示了如何传入 <code>$event</code> 对象，它为组件提供了此事件的详情。</p><p translation-origin="off">The second example demonstrates passing in the <code>$event</code> object, which provides details about the event to the component.</p><p translation-result="on">要查看 DOM 事件的列表，请参见<a href="https://developer.mozilla.org/en-US/docs/Web/Events">网络事件</a>。</p><p translation-origin="off">For a list of DOM events, see: <a href="https://developer.mozilla.org/en-US/docs/Web/Events">https://developer.mozilla.org/en-US/docs/Web/Events</a>.</p><p translation-result="on">要了解更多，请参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#event-binding">事件绑定</a>部分。</p><p translation-origin="off">For more information, see the <a href="guide/template-syntax#event-binding">Event binding</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr><tr style=""><td><h3 id="ng-controller">ng-controller<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-controller"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ng-controller="MovieListCtrl as vm"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"MovieListCtrl as vm"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-controller</code> 指令把控制器附加到视图上。 使用 <code>ng-controller</code>(或把控制器定义为路由的一部分)把视图及其控制器的代码联系在一起。</p><p translation-origin="off">In AngularJS, the <code>ng-controller</code> directive attaches a controller to the view. Using the <code>ng-controller</code> (or defining the controller as part of the routing) ties the view to the controller code associated with that view.</p></td><td><h3 id="component-decorator" translation-result="on">组件装饰器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#component-decorator"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="component-decorator">Component decorator<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#component-decorator"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-movie-list', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './movie-list.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: [ './movie-list.component.css' ], })</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-movie-list'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./movie-list.component.html'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">'./movie-list.component.css'</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
</span><span class="pun">})</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，模板不用再指定它相关的控制器。 反过来，组件会在组件类的装饰器中指定与它相关的模板。</p><p translation-origin="off">In Angular, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator.</p><p translation-result="on">要了解更多，请参见<a href="guide/architecture#components">架构概览</a>。</p><p translation-origin="off">For more information, see <a href="guide/architecture#components">Architecture Overview</a>.</p></td></tr><tr style=""><td><h3 id="ng-hide">ng-hide<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-hide"><i class="material-icons">link</i></a></h3><p translation-result="on">在 AngularJS 中，<code>ng-hide</code> 指令会基于一个表达式显示或隐藏相关的 HTML 元素。 参见<a href="guide/ajs-quick-reference#ng-show">ng-show</a>了解更多。</p><p translation-origin="off">In AngularJS, the <code>ng-hide</code> directive shows or hides the associated HTML element based on an expression. For more information, see <a href="guide/ajs-quick-reference#ng-show">ng-show</a>.</p></td><td><h3 id="bind-to-the-hidden-property" translation-result="on">绑定到 <code>hidden</code> 属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-hidden-property"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bind-to-the-hidden-property">Bind to the <code>hidden</code> property<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-hidden-property"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 中，并没有一个内置的 <em>hide</em> 指令，可以改用属性绑定。 参见<a href="guide/ajs-quick-reference#ng-show">ng-show</a>了解更多。</p><p translation-origin="off">In Angular, you use property binding; there is no built-in <em>hide</em> directive. For more information, see <a href="guide/ajs-quick-reference#ng-show">ng-show</a>.</p></td></tr><tr style=""><td><h3 id="ng-href">ng-href<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-href"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a ng-href="{{ angularDocsUrl }}"&gt;Angular Docs&lt;/a&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">ng-href</span><span class="pun">=</span><span class="atv">"{{ angularDocsUrl }}"</span><span class="tag">&gt;</span><span class="pln">Angular Docs</span><span class="tag">&lt;/a&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"> <code>ng-href</code> 指令允许 AngularJS 对 <code>href</code> 属性进行预处理，以便它能在浏览器获取那个 URL 之前，使用一个返回适当 URL 的绑定表达式替换它。</p><p translation-origin="off">The <code>ng-href</code> directive allows AngularJS to preprocess the <code>href</code> property so that it can replace the binding expression with the appropriate URL before the browser fetches from that URL.</p><p translation-result="on">在 AngularJS 中，<code>ng-href</code> 通常用来作为导航的一部分，激活一个路由。</p><p translation-origin="off">In AngularJS, the <code>ng-href</code> is often used to activate a route as part of navigation.</p><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a ng-href="#{{ moviesHash }}"&gt;Movies&lt;/a&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">ng-href</span><span class="pun">=</span><span class="atv">"#{{ moviesHash }}"</span><span class="tag">&gt;</span><span class="pln">Movies</span><span class="tag">&lt;/a&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">路由在 Angular 中的处理方式不同。</p><p translation-origin="off">Routing is handled differently in Angular.</p></td><td><h3 id="bind-to-the-href-property" translation-result="on">绑定到 <code>href</code> 属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-href-property"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bind-to-the-href-property">Bind to the <code>href</code> property<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-href-property"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="href" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a [href]="angularDocsUrl"&gt;Angular Docs&lt;/a&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;a</span><span class="pln"> [</span><span class="atn">href</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"angularDocsUrl"</span><span class="tag">&gt;</span><span class="pln">Angular Docs</span><span class="tag">&lt;/a&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，并没有内置的 <em>href</em> 指令，改用属性绑定。 把元素的 <code>href</code> 属性放在方括号中，并把它设成一个引号中的模板表达式。</p><p translation-origin="off">Angular uses property binding; there is no built-in <em>href</em> directive. Place the element's <code>href</code> property in square brackets and set it to a quoted template expression.</p><p translation-result="on">要了解<a href="guide/template-syntax#property-binding">属性绑定</a>的更多知识，参见<a href="guide/template-syntax">模板语法</a>。</p><p translation-origin="off">For more information see the <a href="guide/template-syntax#property-binding">Property binding</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p><p translation-result="on">在 Angular 中，<code>href</code> 不再用作路由，而是改用第三个例子中所展示的 <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code> 指令。</p><p translation-origin="off">In Angular, <code>href</code> is no longer used for routing. Routing uses <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code>, as shown in the following example.</p><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="router-link" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a [<a href="api/router/RouterLink" class="code-anchor">routerLink</a>]="['/movies']"&gt;Movies&lt;/a&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;a</span><span class="pln"> [</span><a href="api/router/RouterLink" class="code-anchor"><span class="atn">routerLink</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"['/movies']"</span><span class="tag">&gt;</span><span class="pln">Movies</span><span class="tag">&lt;/a&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">要了解关于路由的更多信息，请参见<a href="guide/router">路由与导航</a>的<a href="guide/router#router-link">RouterLink 绑定</a>部分。</p><p translation-origin="off">For more information on routing, see the <a href="guide/router#router-link">RouterLink binding</a> section of the <a href="guide/router">Routing &amp; Navigation</a> page.</p></td></tr><tr style=""><td><h3 id="ng-if">ng-if<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-if"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;table ng-if="movies.length"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">ng-if</span><span class="pun">=</span><span class="atv">"movies.length"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-if</code> 指令会根据一个表达式来移除或重建 DOM 中的一部分。如果表达式为假，元素就会被从 DOM 中移除。</p><p translation-origin="off">In AngularJS, the <code>ng-if</code> directive removes or recreates a portion of the DOM, based on an expression. If the expression is false, the element is removed from the DOM.</p><p translation-result="on">在这个例子中，除非 <code>movies</code> 数组的长度大于 0，否则 <code>&lt;table&gt;</code> 元素就会被从 DOM 中移除。</p><p translation-origin="off">In this example, the <code>&lt;table&gt;</code> element is removed from the DOM unless the <code>movies</code> array has a length greater than zero.</p></td><td><h3 id="ngif">*ngIf<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ngif"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.html" region="ngIf" ng-version="9.0.0-rc.11"><div style="display:none">&lt;table *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="movies.length"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;table</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"movies.length"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 中的 <code>*<a href="api/common/NgIf" class="code-anchor">ngIf</a></code> 指令与 AngularJS 中的 <code>ng-if</code> 指令一样， 它根据表达式的值移除或重建 DOM 中的一部分。</p><p translation-origin="off">The <code>*<a href="api/common/NgIf" class="code-anchor">ngIf</a></code> directive in Angular works the same as the <code>ng-if</code> directive in AngularJS. It removes or recreates a portion of the DOM based on an expression.</p><p translation-result="on">在这个例子中，除非 <code>movies</code> 数组的长度大于 0，否则 <code>&lt;table&gt;</code> 元素就会被从 DOM 中移除。</p><p translation-origin="off">In this example, the <code>&lt;table&gt;</code> element is removed from the DOM unless the <code>movies</code> array has a length.</p><p translation-result="on">在这个例子中 <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> 前的星号(*)是必须的。 要了解更多信息，参见<a href="guide/structural-directives">结构型指令</a>。</p><p translation-origin="off">The (*) before <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> is required in this example. For more information, see <a href="guide/structural-directives">Structural Directives</a>.</p></td></tr><tr style=""><td><h3 id="ng-model">ng-model<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-model"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input ng-model="vm.favoriteHero"/&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">ng-model</span><span class="pun">=</span><span class="atv">"vm.favoriteHero"</span><span class="tag">/&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-model</code> 指令把一个表单控件绑定到了模板相关控制器的一个属性上。 这提供了<strong>双向绑定</strong>功能，因此，任何对视图中值的改动，都会同步到模型中，对模型的改动，也会同步到视图中。</p><p translation-origin="off">In AngularJS, the <code>ng-model</code> directive binds a form control to a property in the controller associated with the template. This provides <strong>two-way binding</strong>, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.</p></td><td><h3 id="ngmodel">ngModel<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ngmodel"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.html" region="ngModel" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="favoriteHero" /&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"favoriteHero"</span><span class="pln"> </span><span class="tag">/&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，<strong>双向绑定</strong>使用[()]标记出来，它被形象的比作“盒子中的香蕉”。 这种语法是一个简写形式，用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件)，就成了双向绑定。</p><p translation-origin="off">In Angular, <strong>two-way binding</strong> is denoted by <code>[()]</code>, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view) and event binding (from the view to the component), thereby providing two-way binding.</p><p translation-result="on">要了解使用 ngModel 进行双向绑定的更多知识，参见<a href="guide/template-syntax">模板语法</a>中的<a href="../guide/template-syntax.html#ngModel">NgModel—使用 <code>[(ngModel)]</code> 进行双向绑定</a>部分。</p><p translation-origin="off">For more information on two-way binding with <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code>, see the <a href="../guide/template-syntax.html#ngModel">NgModel—Two-way binding to form elements with <code>[(ngModel)]</code></a>section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr><tr style=""><td><h3 id="ng-repeat">ng-repeat<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-repeat"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr ng-repeat="movie in vm.movies"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"movie in vm.movies"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-repeat</code> 指令会为指定集合中的每一个条目重复渲染相关的 DOM 元素。</p><p translation-origin="off">In AngularJS, the <code>ng-repeat</code> directive repeats the associated DOM element for each item in the specified collection.</p><p translation-result="on">在这个例子中，对 <code>movies</code> 集合中的每一个 <code>movie</code> 对象重复渲染了这个表格行元素(<code>&lt;tr&gt;</code>)。</p><p translation-origin="off">In this example, the table row (<code>&lt;tr&gt;</code>) element repeats for each movie object in the collection of movies.</p></td><td><h3 id="ngfor">*ngFor<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ngfor"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.html" region="ngFor" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let movie of movies"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let movie of movies"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 中的 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 指令类似于 AngularJS 中的 <code>ng-repeat</code> 指令。 它为指定集合中的每一个条目重复渲染了相关的 DOM 元素。 更准确的说，它把被界定出来的元素(这个例子中是 <code>&lt;tr&gt;</code>)及其内容转成了一个模板，并使用那个模板来为列表中的每一个条目实例化一个视图。</p><p translation-origin="off">The <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> directive in Angular is similar to the <code>ng-repeat</code> directive in AngularJS. It repeats the associated DOM element for each item in the specified collection. More accurately, it turns the defined element (<code>&lt;tr&gt;</code> in this example) and its contents into a template and uses that template to instantiate a view for each item in the list.</p><p translation-result="on">请注意其它语法上的差异： 在 <code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 前面的星号(*)是必须的；<code>let</code> 关键字把 <code>movie</code> 标记成一个输入变量；列表中使用的介词是 <code>of</code>，而不再是 <code>in</code>。</p><p translation-origin="off">Notice the other syntax differences: The (*) before <code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> is required; the <code>let</code> keyword identifies <code>movie</code> as an input variable; the list preposition is <code>of</code>, not <code>in</code>.</p><p translation-result="on">要了解更多信息，参见<a href="guide/structural-directives">结构性指令</a>。</p><p translation-origin="off">For more information, see <a href="guide/structural-directives">Structural Directives</a>.</p></td></tr><tr style=""><td><h3 id="ng-show">ng-show<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-show"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3 ng-show="vm.favoriteHero"&gt; Your favorite hero is: {{vm.favoriteHero}} &lt;/h3&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;h3</span><span class="pln"> </span><span class="atn">ng-show</span><span class="pun">=</span><span class="atv">"vm.favoriteHero"</span><span class="tag">&gt;</span><span class="pln">
  Your favorite hero is: {{vm.favoriteHero}}
</span><span class="tag">&lt;/h3&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-show</code> 指令根据一个表达式来显示或隐藏相关的 DOM 元素。</p><p translation-origin="off">In AngularJS, the <code>ng-show</code> directive shows or hides the associated DOM element, based on an expression.</p><p translation-result="on">在这个例子中，如果 <code>favoriteHero</code> 变量为真，<code>&lt;div&gt;</code> 元素就会显示出来。</p><p translation-origin="off">In this example, the <code>&lt;div&gt;</code> element is shown if the <code>favoriteHero</code> variable is truthy.</p></td><td><h3 id="bind-to-the-hidden-property-1" translation-result="on">绑定到 <code>hidden</code> 属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-hidden-property-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bind-to-the-hidden-property-1">Bind to the <code>hidden</code> property<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-hidden-property-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.html" region="hidden" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3 [hidden]="!favoriteHero"&gt; Your favorite hero is: {{favoriteHero}} &lt;/h3&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;h3</span><span class="pln"> [</span><span class="atn">hidden</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"!favoriteHero"</span><span class="tag">&gt;</span><span class="pln">
  Your favorite hero is: {{favoriteHero}}
</span><span class="tag">&lt;/h3&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，并没有内置的 <em>show</em> 指令，可以改用属性绑定。 要隐藏或显示一个元素，绑定到它的 <code>hidden</code> 属性就可以了。</p><p translation-origin="off">Angular uses property binding; there is no built-in <em>show</em> directive. For hiding and showing elements, bind to the HTML <code>hidden</code> property.</p><p translation-result="on">要想有条件的显示一个元素，就把该元素的 <code>hidden</code> 属性放到一个方括号里，并且把它设置为引号中的模板表达式，它的结果应该是与<em>显示</em>时<em>相反</em>的值。</p><p translation-origin="off">To conditionally display an element, place the element's <code>hidden</code> property in square brackets and set it to a quoted template expression that evaluates to the <em>opposite</em> of <em>show</em>.</p><p translation-result="on">在这个例子中，如果 <code>favoriteHero</code> 变量不是真值，<code>&lt;div&gt;</code> 元素就会被隐藏。</p><p translation-origin="off">In this example, the <code>&lt;div&gt;</code> element is hidden if the <code>favoriteHero</code> variable is not truthy.</p><p translation-result="on">要了解属性绑定的更多知识，参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#property-binding">属性绑定</a>部分。</p><p translation-origin="off">For more information on property binding, see the <a href="guide/template-syntax#property-binding">Property binding</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr><tr style=""><td><h3 id="ng-src">ng-src<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-src"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img ng-src="{{movie.imageurl}}"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">ng-src</span><span class="pun">=</span><span class="atv">"{{movie.imageurl}}"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"> <code>ng-src</code> 指令允许 AngularJS 对 <code>src</code> 属性进行预处理，以便它能够在浏览器获取此 URL 之前，用一个返回适当 URL 的绑定表达式替换它。</p><p translation-origin="off">The <code>ng-src</code> directive allows AngularJS to preprocess the <code>src</code> property so that it can replace the binding expression with the appropriate URL before the browser fetches from that URL.</p></td><td><h3 id="bind-to-the-src-property" translation-result="on">绑定到 <code>src</code> 属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-src-property"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bind-to-the-src-property">Bind to the <code>src</code> property<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#bind-to-the-src-property"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="src" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img [src]="movie.imageurl"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"movie.imageurl"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，并没有一个内置的 <em>src</em> 指令，可以使用属性绑定。 把 <code>src</code> 属性放到方括号中，并且把它设为一个引号中的绑定表达式。</p><p translation-origin="off">Angular uses property binding; there is no built-in <em>src</em> directive. Place the <code>src</code> property in square brackets and set it to a quoted template expression.</p><p translation-result="on">要了解关于属性绑定的更多知识，参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#property-binding">属性绑定</a>部分。</p><p translation-origin="off">For more information on property binding, see the <a href="guide/template-syntax#property-binding">Property binding</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr><tr style=""><td><h3 id="ng-style">ng-style<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-style"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ng-style="{color: colorPreference}"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-style</span><span class="pun">=</span><span class="atv">"{color: colorPreference}"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-style</code> 指令根据一个绑定表达式设置一个 HTML 元素的 CSS 样式。 该表达式通常是一个“键-值”形式的控制对象，对象的每个键都是一个 CSS 属性，每个值都是一个能计算为此样式的合适值的表达式。</p><p translation-origin="off">In AngularJS, the <code>ng-style</code> directive sets a CSS style on an HTML element based on an expression. That expression is often a key-value control object with each key of the object defined as a CSS property, and each value defined as an expression that evaluates to a value appropriate for the style.</p><p translation-result="on">在这个例子中，<code>color</code> 样式被设置为 <code>colorPreference</code> 变量的当前值。</p><p translation-origin="off">In the example, the <code>color</code> style is set to the current value of the <code>colorPreference</code> variable.</p></td><td><h3 id="ngstyle">ngStyle<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ngstyle"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="ngStyle" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div [<a href="api/common/NgStyle" class="code-anchor">ngStyle</a>]="{'color': colorPreference}"&gt; &lt;div [style.color]="colorPreference"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgStyle" class="code-anchor"><span class="atn">ngStyle</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"{'color': colorPreference}"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">color</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"colorPreference"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，<code><a href="api/common/NgStyle" class="code-anchor">ngStyle</a></code> 指令的工作方式与此类似。它根据一个表达式设置 HTML 元素上的 CSS 样式。</p><p translation-origin="off">In Angular, the <code><a href="api/common/NgStyle" class="code-anchor">ngStyle</a></code> directive works similarly. It sets a CSS style on an HTML element based on an expression.</p><p translation-result="on">在第一个例子中，<code>color</code> 样式被设置成了 <code>colorPreference</code> 变量的当前值。</p><p translation-origin="off">In the first example, the <code>color</code> style is set to the current value of the <code>colorPreference</code> variable.</p><p translation-result="on">Angular 还有<strong>样式绑定</strong>语法，它是单独设置一个样式的好方法。它展示在第二个例子中。</p><p translation-origin="off">Angular also has <strong>style binding</strong>, which is good way to set a single style. This is shown in the second example.</p><p translation-result="on">要了解关于样式绑定的更多知识，参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#style-binding">样式绑定</a>部分。</p><p translation-origin="off">For more information on style binding, see the <a href="guide/template-syntax#style-binding">Style binding</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p><p translation-result="on">要了解关于 <code><a href="api/common/NgStyle" class="code-anchor">ngStyle</a></code> 指令的更多知识，参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#ngStyle">NgStyle</a>部分。</p><p translation-origin="off">For more information on the <code><a href="api/common/NgStyle" class="code-anchor">ngStyle</a></code> directive, see <a href="guide/template-syntax#ngStyle">NgStyle</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr><tr style=""><td><h3 id="ng-switch">ng-switch<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ng-switch"><i class="material-icons">link</i></a></h3><code-example hidecopy="" format="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ng-switch="vm.favoriteHero &amp;&amp; vm.checkMovieHero(vm.favoriteHero)"&gt; &lt;div ng-switch-when="true"&gt; Excellent choice! &lt;/div&gt; &lt;div ng-switch-when="false"&gt; No movie, sorry! &lt;/div&gt; &lt;div ng-switch-default&gt; Please enter your favorite hero. &lt;/div&gt; &lt;/div&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-switch</span><span class="pun">=</span><span class="atv">"vm.favoriteHero &amp;&amp;
                vm.checkMovieHero(vm.favoriteHero)"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-switch-when</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
      Excellent choice!
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-switch-when</span><span class="pun">=</span><span class="atv">"false"</span><span class="tag">&gt;</span><span class="pln">
      No movie, sorry!
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-switch-default</span><span class="tag">&gt;</span><span class="pln">
      Please enter your favorite hero.
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，<code>ng-switch</code> 指令根据一个表达式的当前值把元素的内容替换成几个模板之一。</p><p translation-origin="off">In AngularJS, the <code>ng-switch</code> directive swaps the contents of an element by selecting one of the templates based on the current value of an expression.</p><p translation-result="on">在这个例子中，如果 <code>favoriteHero</code> 没有设置，则模板显示“Please enter ...”。 如果 <code>favoriteHero</code> 设置过，它就会通过调用一个控制其方法来检查它是否电影里的英雄。 如果该方法返回 <code>true</code>，模板就会显示“Excellent choice!”。 如果该方法返回 <code>false</code>，该模板就会显示“No movie, sorry!”。</p><p translation-origin="off">In this example, if <code>favoriteHero</code> is not set, the template displays "Please enter ...". If <code>favoriteHero</code> is set, it checks the movie hero by calling a controller method. If that method returns <code>true</code>, the template displays "Excellent choice!". If that methods returns <code>false</code>, the template displays "No movie, sorry!".</p></td><td><h3 id="ngswitch">ngSwitch<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ngswitch"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.html" region="ngSwitch" ng-version="9.0.0-rc.11"><div style="display:none">&lt;span [<a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a>]="favoriteHero &amp;&amp; checkMovieHero(favoriteHero)"&gt; &lt;p *<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="true"&gt; Excellent choice! &lt;/p&gt; &lt;p *<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="false"&gt; No movie, sorry! &lt;/p&gt; &lt;p *<a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a>&gt; Please enter your favorite hero. &lt;/p&gt; &lt;/span&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;span</span><span class="pln"> [</span><a href="api/common/NgSwitch" class="code-anchor"><span class="atn">ngSwitch</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"favoriteHero &amp;&amp;
               checkMovieHero(favoriteHero)"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;p</span><span class="pln"> *</span><a href="api/common/NgSwitchCase" class="code-anchor"><span class="atn">ngSwitchCase</span></a><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
    Excellent choice!
  </span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;p</span><span class="pln"> *</span><a href="api/common/NgSwitchCase" class="code-anchor"><span class="atn">ngSwitchCase</span></a><span class="pun">=</span><span class="atv">"false"</span><span class="tag">&gt;</span><span class="pln">
    No movie, sorry!
  </span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;p</span><span class="pln"> *</span><a href="api/common/NgSwitchDefault" class="code-anchor"><span class="atn">ngSwitchDefault</span></a><span class="tag">&gt;</span><span class="pln">
    Please enter your favorite hero.
  </span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;/span&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，<code><a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code> 指令的工作方式与此类似。 它会显示那个与 <code><a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code> 表达式的当前值匹配的那个 <code>*<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a></code> 所在的元素。</p><p translation-origin="off">In Angular, the <code><a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code> directive works similarly. It displays an element whose <code>*<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a></code> matches the current <code><a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code> expression value.</p><p translation-result="on">在这个例子中，如果 <code>favoriteHero</code> 没有设置，则 <code><a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code> 的值是 <code>null</code>， <code>*<a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a></code> 中会显示 “Please enter ...”。 如果设置了 <code>favoriteHero</code>，应用就会通过调用一个组件方法来检查电影英雄。 如果该方法返回 <code>true</code>，就会显示 “Excellent choice!”。 如果该方法返回 <code>false</code>，就会显示 “No movie, sorry!”。</p><p translation-origin="off">In this example, if <code>favoriteHero</code> is not set, the <code><a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code> value is <code>null</code> and <code>*<a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a></code> displays, "Please enter ...". If <code>favoriteHero</code> is set, the app checks the movie hero by calling a component method. If that method returns <code>true</code>, the app selects <code>*<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="true"</code> and displays: "Excellent choice!" If that methods returns <code>false</code>, the app selects <code>*<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="false"</code> and displays: "No movie, sorry!"</p><p translation-result="on">在这个例子中，<code><a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a></code> 和 <code><a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a></code> 前面的星号(*)是必须的。</p><p translation-origin="off">The (*) before <code><a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a></code> and <code><a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a></code> is required in this example.</p><p translation-result="on">要了解更多信息，参见<a href="guide/template-syntax">模板语法</a>中的<a href="guide/template-syntax#ngSwitch">NgSwitch 指令</a>部分。</p><p translation-origin="off">For more information, see <a href="guide/template-syntax#ngSwitch">The NgSwitch directives</a> section of the <a href="guide/template-syntax">Template Syntax</a> page.</p></td></tr></tbody></table><a id="filters-pipes"></a><h2 id="filterspipes" translation-result="on">过滤器/管道<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#filterspipes"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="filterspipes">Filters/pipes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#filterspipes"><i class="material-icons">link</i></a></h2><p translation-result="on">Angular 中的<strong>管道</strong>为模板提供了格式化和数据转换功能，类似于 AngularJS 中的<strong>过滤器</strong>。 AngularJS 中的很多内置过滤器在 Angular 中都有对应的管道。 要了解管道的更多信息，参见<a href="guide/pipes">Pipes</a>。</p><p translation-origin="off">Angular <strong>pipes</strong> provide formatting and transformation for data in the template, similar to AngularJS <strong>filters</strong>. Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see <a href="guide/pipes">Pipes</a>.</p><table width="100%"><colgroup><col width="50%"><col width="50%"></colgroup><tbody><tr><th><p>AngularJS</p></th><th><p>Angular</p></th></tr><tr style=""><td><h3 id="currency">currency<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#currency"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.price | <a href="api/common/CurrencyPipe" class="code-anchor">currency</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.price | </span><a href="api/common/CurrencyPipe" class="code-anchor"><span class="pln">currency</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">把一个数字格式化成货币。</p><p translation-origin="off">Formats a number as currency.</p></td><td><h3 id="currency-1">currency<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#currency-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="currency" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.price | <a href="api/common/CurrencyPipe" class="code-anchor">currency</a>:'USD':true}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.price | </span><a href="api/common/CurrencyPipe" class="code-anchor"><span class="pln">currency</span></a><span class="pln">:'USD':true}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 的 <code><a href="api/common/CurrencyPipe" class="code-anchor">currency</a></code> 管道和 1 中很相似，只是有些参数变化了。</p><p translation-origin="off">The Angular <code><a href="api/common/CurrencyPipe" class="code-anchor">currency</a></code> pipe is similar although some of the parameters have changed.</p></td></tr><tr style=""><td><h3 id="date">date<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#date"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.releaseDate | <a href="api/common/DatePipe" class="code-anchor">date</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.releaseDate | </span><a href="api/common/DatePipe" class="code-anchor"><span class="pln">date</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">基于要求的格式把日期格式化成字符串。</p><p translation-origin="off">Formats a date to a string based on the requested format.</p></td><td><h3 id="date-1">date<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#date-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="date" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.releaseDate | <a href="api/common/DatePipe" class="code-anchor">date</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.releaseDate | </span><a href="api/common/DatePipe" class="code-anchor"><span class="pln">date</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 的 <code><a href="api/common/DatePipe" class="code-anchor">date</a></code> 管道和它很相似。</p><p translation-origin="off">The Angular <code><a href="api/common/DatePipe" class="code-anchor">date</a></code> pipe is similar.</p></td></tr><tr style=""><td><h3 id="filter">filter<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#filter"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"movie in movieList | filter: {title:listFilter}"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">根据过滤条件从指定的集合中选取出一个子集。</p><p translation-origin="off">Selects a subset of items from the defined collection, based on the filter criteria.</p></td><td><h3 id="none" translation-result="on">没了<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#none"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="none">none<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#none"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 中，出于性能的考虑，并没有一个类似的管道。 过滤逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中，可以考虑构建一个自定义管道。</p><p translation-origin="off">For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.</p></td></tr><tr style=""><td><h3 id="json">json<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#json"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;pre&gt;{{movie | <a href="api/common/JsonPipe" class="code-anchor">json</a>}}&lt;/pre&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;pre&gt;</span><span class="pln">{{movie | </span><a href="api/common/JsonPipe" class="code-anchor"><span class="pln">json</span></a><span class="pln">}}</span><span class="tag">&lt;/pre&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">把一个 JavaScript 对象转换成一个 JSON 字符串。这对调试很有用。</p><p translation-origin="off">Converts a JavaScript object into a JSON string. This is useful for debugging.</p></td><td><h3 id="json-1">json<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#json-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="json" ng-version="9.0.0-rc.11"><div style="display:none">&lt;pre&gt;{{movie | <a href="api/common/JsonPipe" class="code-anchor">json</a>}}&lt;/pre&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;pre&gt;</span><span class="pln">{{movie | </span><a href="api/common/JsonPipe" class="code-anchor"><span class="pln">json</span></a><span class="pln">}}</span><span class="tag">&lt;/pre&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 的 <code><a href="api/common/JsonPipe" class="code-anchor">json</a></code> 管道做完全相同的事。</p><p translation-origin="off">The Angular <code><a href="api/common/JsonPipe" class="code-anchor">json</a></code> pipe does the same thing.</p></td></tr><tr style=""><td><h3 id="limitto">limitTo<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#limitto"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr ng-repeat="movie in movieList | limitTo:2:0"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"movie in movieList | limitTo:2:0"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。</p><p translation-origin="off">Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0).</p></td><td><h3 id="slice">slice<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#slice"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="slice" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let movie of movies | <a href="api/common/SlicePipe" class="code-anchor">slice</a>:0:2"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let movie of movies | </span><a href="api/common/SlicePipe" class="code-anchor"><span class="atv">slice</span></a><span class="atv">:0:2"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on"> <code><a href="api/common/SlicePipe" class="code-anchor">SlicePipe</a></code> 做同样的事，但是<em>两个参数的顺序是相反的</em>，以便于 JavaScript 中的 <code><a href="api/common/SlicePipe" class="code-anchor">slice</a></code> 方法保持一致。 第一个参数是起始索引号，第二个参数是限制的数量。 和 AngularJS 中一样，如果们改用组件中的代码实现此操作，性能将会提升。</p><p translation-origin="off">The <code><a href="api/common/SlicePipe" class="code-anchor">SlicePipe</a></code> does the same thing but the <em>order of the parameters is reversed</em>, in keeping with the JavaScript <code>Slice</code> method. The first parameter is the starting index; the second is the limit. As in AngularJS, coding this operation within the component instead could improve performance.</p></td></tr><tr style=""><td><h3 id="lowercase">lowercase<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#lowercase"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.title | <a href="api/common/LowerCasePipe" class="code-anchor">lowercase</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.title | </span><a href="api/common/LowerCasePipe" class="code-anchor"><span class="pln">lowercase</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">把该字符串转成小写形式。</p><p translation-origin="off">Converts the string to lowercase.</p></td><td><h3 id="lowercase-1">lowercase<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#lowercase-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="lowercase" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.title | <a href="api/common/LowerCasePipe" class="code-anchor">lowercase</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.title | </span><a href="api/common/LowerCasePipe" class="code-anchor"><span class="pln">lowercase</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 的 <code><a href="api/common/LowerCasePipe" class="code-anchor">lowercase</a></code> 管道和 1 中的功能完全相同。</p><p translation-origin="off">The Angular <code><a href="api/common/LowerCasePipe" class="code-anchor">lowercase</a></code> pipe does the same thing.</p></td></tr><tr style=""><td><h3 id="number">number<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#number"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.starRating | <a href="api/common/DecimalPipe" class="code-anchor">number</a>}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.starRating | </span><a href="api/common/DecimalPipe" class="code-anchor"><span class="pln">number</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">把数字格式化为文本。</p><p translation-origin="off">Formats a number as text.</p></td><td><h3 id="number-1">number<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#number-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.component.html" region="number" ng-version="9.0.0-rc.11"><div style="display:none">&lt;td&gt;{{movie.starRating | <a href="api/common/DecimalPipe" class="code-anchor">number</a>}}&lt;/td&gt; &lt;td&gt;{{movie.starRating | <a href="api/common/DecimalPipe" class="code-anchor">number</a>:'1.1-2'}}&lt;/td&gt; &lt;td&gt;{{movie.approvalRating | <a href="api/common/PercentPipe" class="code-anchor">percent</a>: '1.0-2'}}&lt;/td&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.starRating | </span><a href="api/common/DecimalPipe" class="code-anchor"><span class="pln">number</span></a><span class="pln">}}</span><span class="tag">&lt;/td&gt;</span><span class="pln">
</span><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.starRating | </span><a href="api/common/DecimalPipe" class="code-anchor"><span class="pln">number</span></a><span class="pln">:'1.1-2'}}</span><span class="tag">&lt;/td&gt;</span><span class="pln">
</span><span class="tag">&lt;td&gt;</span><span class="pln">{{movie.approvalRating | </span><a href="api/common/PercentPipe" class="code-anchor"><span class="pln">percent</span></a><span class="pln">: '1.0-2'}}</span><span class="tag">&lt;/td&gt;</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 的 <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code> 管道很相似。 但在指定小数点位置时，它提供了更多的功能，如第二个范例所示。</p><p translation-origin="off">The Angular <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code> pipe is similar. It provides more functionality when defining the decimal places, as shown in the second example above.</p><p translation-result="on">Angular 还有一个 <code><a href="api/common/PercentPipe" class="code-anchor">percent</a></code> 管道，它把一个数组格式化为本地化的(local)百分比格式，如第三个范例所示。</p><p translation-origin="off">Angular also has a <code><a href="api/common/PercentPipe" class="code-anchor">percent</a></code> pipe, which formats a number as a local percentage as shown in the third example.</p></td></tr><tr style=""><td><h3 id="orderby">orderBy<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#orderby"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr ng-repeat="movie in movieList | orderBy : 'title'"&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"movie in movieList | orderBy : 'title'"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">使用表达式中所指定的方式对集合进行排序。 在这个例子中，<code>movieList</code> 被根据 movie 的 title 排序了。</p><p translation-origin="off">Displays the collection in the order specified by the expression. In this example, the movie title orders the <code>movieList</code>.</p></td><td><h3 id="none-1" translation-result="on">没了<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#none-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="none-1">none<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#none-1"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 中，出于性能的考虑，并没有一个类似的管道。 排序逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中，可以考虑构建一个自定义管道。</p><p translation-origin="off">For performance reasons, no comparable pipe exists in Angular. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.</p></td></tr></tbody></table><a id="controllers-components"></a><h2 id="modulescontrollerscomponents" translation-result="on">模块/控制器/组件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#modulescontrollerscomponents"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="modulescontrollerscomponents">Modules/controllers/components<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#modulescontrollerscomponents"><i class="material-icons">link</i></a></h2><p translation-result="on">无论在 AngularJS 还是 Angular 中，“模块”都会帮你把应用拆分成一些内聚的功能块。</p><p translation-origin="off">In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.</p><p translation-result="on">在 AngularJS 中，你要在<strong>控制器</strong>中写代码，来为视图提供模型和方法。 在 Angular 中，你要创建<strong>组件</strong>。</p><p translation-origin="off">In AngularJS, you write the code that provides the model and the methods for the view in a <strong>controller</strong>. In Angular, you build a <strong>component</strong>.</p><p translation-result="on">因为很多 AngularJS 的代码是用 JavaScript 写的，所以在 AngularJS 列显示的是 JavaScript 代码，而 Angular 列显示的是 TypeScript 代码。</p><p translation-origin="off">Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript.</p><table width="100%"><colgroup><col width="50%"><col width="50%"></colgroup><tbody><tr><th><p>AngularJS</p></th><th><p>Angular</p></th></tr><tr style=""><td><h3 id="iife">IIFE<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#iife"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">(function () { ... }());</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="pun">...</span><span class="pln">
</span><span class="pun">}());</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，用立即调用的函数表达式(IIFE)来包裹控制器代码可以让控制器代码不会污染全局命名空间。</p><p translation-origin="off">In AngularJS, an immediately invoked function expression (or IIFE) around controller code keeps it out of the global namespace.</p></td><td><h3 id="none-2" translation-result="on">没了<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#none-2"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="none-2">none<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#none-2"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 中不用担心这个问题，因为使用 ES 2015 的模块，模块会替你处理命名空间问题。</p><p translation-origin="off">This is a nonissue in Angular because ES 2015 modules handle the namespacing for you.</p><p translation-result="on">要了解关于模块的更多信息，参见<a href="guide/architecture">架构概览</a>中的<a href="guide/architecture#modules">模块</a>部分。</p><p translation-origin="off">For more information on modules, see the <a href="guide/architecture#modules">Modules</a> section of the <a href="guide/architecture">Architecture Overview</a>.</p></td></tr><tr style=""><td><h3 id="angular-modules" translation-result="on">Angular 模块<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#angular-modules"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="angular-modules">Angular modules<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#angular-modules"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">angular.module("movieHunter", ["ngRoute"]);</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="pln">angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">"movieHunter"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">"ngRoute"</span><span class="pun">]);</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，Angular 模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。</p><p translation-origin="off">In AngularJS, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon.</p></td><td><h3 id="ngmodules">NgModules<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#ngmodules"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/app.module.1.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln">      </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">  </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 的模块用 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 装饰器进行定义，有如下用途：</p><p translation-origin="off">NgModules, defined with the <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> decorator, serve the same purpose:</p><p translation-result="on"> <code>imports</code>: 指定当前模块依赖的其它模块列表</p><p translation-origin="off">* <code>imports</code>: specifies the list of other modules that this module depends upon</p><p translation-result="on"> <code>declaration</code>: 用于记录组件、管道和指令。</p><p translation-origin="off">* <code>declaration</code>: keeps track of your components, pipes, and directives.</p><p translation-result="on">要了解关于模块的更多知识，参见<a href="guide/ngmodules">NgModules</a>。</p><p translation-origin="off">For more information on modules, see <a href="guide/ngmodules">NgModules</a>.</p></td></tr><tr style=""><td><h3 id="controller-registration" translation-result="on">控制器注册<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#controller-registration"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="controller-registration">Controller registration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#controller-registration"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">angular .module("movieHunter") .controller("MovieListCtrl", ["movieService", MovieListCtrl]);</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="pln">angular
  </span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">"movieHunter"</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">"MovieListCtrl"</span><span class="pun">,</span><span class="pln">
              </span><span class="pun">[</span><span class="str">"movieService"</span><span class="pun">,</span><span class="pln">
               </span><span class="typ">MovieListCtrl</span><span class="pun">]);</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，在每个控制器中都有一些代码，用于找到合适的 Angular 模块并把该控制器注册进去。</p><p translation-origin="off">AngularJS has code in each controller that looks up an appropriate Angular module and registers the controller with that module.</p><p translation-result="on">第一个参数是控制器的名称，第二个参数定义了所有将注入到该控制器的依赖的字符串名称，以及一个到控制器函数的引用。</p><p translation-origin="off">The first argument is the controller name. The second argument defines the string names of all dependencies injected into this controller, and a reference to the controller function.</p></td><td><h3 id="component-decorator-1" translation-result="on">组件装饰器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#component-decorator-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="component-decorator-1">Component decorator<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#component-decorator-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-movie-list', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './movie-list.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: [ './movie-list.component.css' ], })</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-movie-list'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./movie-list.component.html'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">'./movie-list.component.css'</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
</span><span class="pun">})</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">Angular 会往组件类上添加了一个装饰器，以提供所需的任何元数据。 <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> 装饰器把该类声明为组件，并提供了关于该组件的元数据，比如它的选择器(或标签)和模板。</p><p translation-origin="off">Angular adds a decorator to the component class to provide any required metadata. The <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> decorator declares that the class is a component and provides metadata about that component such as its selector (or tag) and its template.</p><p translation-result="on">这就是把模板关联到代码的方式，它定义在组件类中。</p><p translation-origin="off">This is how you associate a template with logic, which is defined in the component class.</p><p translation-result="on">要了解关于组件的更多信息，参见<a href="guide/architecture">架构概览</a>中的<a href="guide/architecture#components">组件</a>部分。</p><p translation-origin="off">For more information, see the <a href="guide/architecture#components">Components</a> section of the <a href="guide/architecture">Architecture Overview</a> page.</p></td></tr><tr style=""><td><h3 id="controller-function" translation-result="on">控制器函数<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#controller-function"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="controller-function">Controller function<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#controller-function"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">function MovieListCtrl(movieService) { }</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="kwd">function</span><span class="pln"> </span><span class="typ">MovieListCtrl</span><span class="pun">(</span><span class="pln">movieService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，你在控制器函数中编写模型和方法的代码。</p><p translation-origin="off">In AngularJS, you write the code for the model and methods in a controller function.</p></td><td><h3 id="component-class" translation-result="on">组件类<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#component-class"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="component-class">Component class<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#component-class"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.ts" region="class" ng-version="9.0.0-rc.11"><div style="display:none">export class MovieListComponent { }</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">MovieListComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，你将创建一个组件类来容纳数据模型和控制方法。使用 TypeScript 的 <code> export</code> 关键字导出该类，以便可以将此功能导入 NgModules 中。</p><p translation-origin="off">In Angular, you create a component class to contain the data model and control methods. Use the TypeScript <code>export</code> keyword to export the class so that the functionality can be imported into NgModules.</p><p translation-result="on">要了解关于组件的更多信息，参见<a href="guide/architecture">架构概览</a>中的<a href="guide/architecture#components">组件</a>部分。</p><p translation-origin="off">For more information, see the <a href="guide/architecture#components">Components</a> section of the <a href="guide/architecture">Architecture Overview</a> page.</p></td></tr><tr style=""><td><h3 id="dependency-injection" translation-result="on">依赖注入<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#dependency-injection"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="dependency-injection">Dependency injection<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#dependency-injection"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { }</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="typ">MovieListCtrl</span><span class="pun">.</span><span class="pln">$inject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'MovieService'</span><span class="pun">];</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> </span><span class="typ">MovieListCtrl</span><span class="pun">(</span><span class="pln">movieService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 AngularJS 中，你把所有依赖都作为控制器函数的参数。 这个例子注入了一个 <code>MovieService</code>。</p><p translation-origin="off">In AngularJS, you pass in any dependencies as controller function arguments. This example injects a <code>MovieService</code>.</p><p translation-result="on">为了防止在最小化时出现问题，第一个参数明确告诉 Angular 它应该注入一个 <code>MovieService</code> 的实例。</p><p translation-origin="off">To guard against minification problems, tell Angular explicitly that it should inject an instance of the <code>MovieService</code> in the first parameter.</p></td><td><h3 id="dependency-injection-1" translation-result="on">依赖注入<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#dependency-injection-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="dependency-injection-1">Dependency injection<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#dependency-injection-1"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.ts" region="di" ng-version="9.0.0-rc.11"><div style="display:none">constructor(movieService: MovieService) { }</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">movieService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">MovieService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">在 Angular 中，你要把依赖作为组件构造函数的参数传入。 这个例子注入了一个 <code>MovieService</code>。 即使在最小化之后，第一个参数的 TypeScript 类型也会告诉 Angular 它该注入什么。</p><p translation-origin="off">In Angular, you pass in dependencies as arguments to the component class constructor. This example injects a <code>MovieService</code>. The first parameter's TypeScript type tells Angular what to inject, even after minification.</p><p translation-result="on">要了解关于依赖注入的更多信息，参见<a href="guide/architecture">架构概览</a>中的<a href="guide/architecture#dependency-injection">依赖注入</a>部分。</p><p translation-origin="off">For more information, see the <a href="guide/architecture#dependency-injection">Dependency injection</a> section of the <a href="guide/architecture">Architecture Overview</a>.</p></td></tr></tbody></table><a id="style-sheets"></a><h2 id="style-sheets" translation-result="on">样式表<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#style-sheets"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="style-sheets">Style sheets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#style-sheets"><i class="material-icons">link</i></a></h2><p translation-result="on">样式表让你的应用程序看起来更漂亮。 在 AngularJS 中，你要为整个应用程序指定样式表。 随着应用程序的不断成长，为各个部分指定的样式会被合并，导致无法预计的后果。 在 Angular 中，你仍然要为整个应用程序定义样式，不过现在也可以把样式表封装在特定的组件中。</p><p translation-origin="off">Style sheets give your application a nice look. In AngularJS, you specify the style sheets for your entire application. As the application grows over time, the styles for the many parts of the application merge, which can cause unexpected results. In Angular, you can still define style sheets for your entire application. But now you can also encapsulate a style sheet within a specific component.</p><table width="100%"><colgroup><col width="50%"><col width="50%"></colgroup><tbody><tr><th><p>AngularJS</p></th><th><p>Angular</p></th></tr><tr style=""><td><h3 id="link-tag" translation-result="on">Link 标签<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#link-tag"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="link-tag">Link tag<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#link-tag"><i class="material-icons">link</i></a></h3><code-example hidecopy="" ng-version="9.0.0-rc.11"><div style="display:none">&lt;link href="styles.css" rel="stylesheet" /&gt;</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"styles.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="tag">/&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">AngularJS 在 <code>index.html</code> 的 <code>head</code> 区使用 <code>link</code> 标签来为应用程序定义样式。</p><p translation-origin="off">AngularJS, uses a <code>link</code> tag in the head section of the <code>index.html</code> file to define the styles for the application.</p></td><td><h3 id="styles-configuration" translation-result="on">样式配置<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#styles-configuration"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="styles-configuration">Styles configuration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#styles-configuration"><i class="material-icons">link</i></a></h3><p><code-example hidecopy="" path="ajs-quick-reference/.angular-cli.1.json" region="styles" ng-version="9.0.0-rc.11"><div style="display:none">"styles": [ "styles.css" ],</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><span class="str">"styles"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="str">"styles.css"</span><span class="pln">
</span><span class="pun">],</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">使用 Angular CLI，你可以在 <code>angular.json</code> 文件中配置全局样式。 也可以把扩展名改为 <code>.scss</code> 来使用 sass。</p><p translation-origin="off">With the Angular CLI, you can configure your global styles in the <code>angular.json</code> file. You can rename the extension to <code>.scss</code> to use sass.</p><h3 id="styleurls">StyleUrls<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ajs-quick-reference#styleurls"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 中，你可以在 <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> 的元数据中使用 <code>styles</code> 或 <code><a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a></code> 属性来为一个特定的组件定义样式表。</p><p translation-origin="off">In Angular, you can use the <code>styles</code> or <code><a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a></code> property of the <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> metadata to define a style sheet for a particular component.</p><p><code-example hidecopy="" path="ajs-quick-reference/src/app/movie-list.component.ts" region="style-url" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: [ './movie-list.component.css' ],</div><aio-code><pre class="lang- prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">'./movie-list.component.css'</span><span class="pln"> </span><span class="pun">],</span></code>
    </pre></aio-code></code-example></p><p translation-result="on">这让你可以为各个组件设置合适的样式，而不用担心它泄漏到程序中的其它部分。</p><p translation-origin="off">This allows you to set appropriate styles for individual components that won’t leak into other parts of the application.</p></td></tr></tbody></table></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="关于AngularJS 与 Angular 概念的快速参考"><a href="guide/ajs-quick-reference#angularjs-to-angular-concepts-quick-reference">关于AngularJS 与 Angular 概念的快速参考</a></li><li class="h2 ng-star-inserted" title="模板基础"><a href="guide/ajs-quick-reference#template-basics">模板基础</a></li><li class="h3 ng-star-inserted" title="绑定/插值"><a href="guide/ajs-quick-reference#bindingsinterpolation">绑定/插值</a></li><li class="h3 ng-star-inserted" title="绑定/插值"><a href="guide/ajs-quick-reference#bindingsinterpolation-1">绑定/插值</a></li><li class="h3 ng-star-inserted" title="过滤器"><a href="guide/ajs-quick-reference#filters">过滤器</a></li><li class="h3 ng-star-inserted" title="管道"><a href="guide/ajs-quick-reference#pipes">管道</a></li><li class="h3 ng-star-inserted" title="局部变量"><a href="guide/ajs-quick-reference#local-variables">局部变量</a></li><li class="h3 ng-star-inserted" title="输入变量"><a href="guide/ajs-quick-reference#input-variables">输入变量</a></li><li class="h2 ng-star-inserted" title="模板指令"><a href="guide/ajs-quick-reference#template-directives">模板指令</a></li><li class="h3 ng-star-inserted" title="ng-app"><a href="guide/ajs-quick-reference#ng-app">ng-app</a></li><li class="h3 ng-star-inserted" title="引导"><a href="guide/ajs-quick-reference#bootstrapping">引导</a></li><li class="h3 ng-star-inserted" title="ng-class"><a href="guide/ajs-quick-reference#ng-class">ng-class</a></li><li class="h3 ng-star-inserted" title="ngClass"><a href="guide/ajs-quick-reference#ngclass">ngClass</a></li><li class="h3 ng-star-inserted" title="ng-click"><a href="guide/ajs-quick-reference#ng-click">ng-click</a></li><li class="h3 ng-star-inserted" title="绑定到 click 事件"><a href="guide/ajs-quick-reference#bind-to-the-click-event">绑定到 <code>click</code> 事件</a></li><li class="h3 ng-star-inserted" title="ng-controller"><a href="guide/ajs-quick-reference#ng-controller">ng-controller</a></li><li class="h3 ng-star-inserted" title="组件装饰器"><a href="guide/ajs-quick-reference#component-decorator">组件装饰器</a></li><li class="h3 ng-star-inserted" title="ng-hide"><a href="guide/ajs-quick-reference#ng-hide">ng-hide</a></li><li class="h3 ng-star-inserted" title="绑定到 hidden 属性"><a href="guide/ajs-quick-reference#bind-to-the-hidden-property">绑定到 <code>hidden</code> 属性</a></li><li class="h3 ng-star-inserted" title="ng-href"><a href="guide/ajs-quick-reference#ng-href">ng-href</a></li><li class="h3 ng-star-inserted" title="绑定到 href 属性"><a href="guide/ajs-quick-reference#bind-to-the-href-property">绑定到 <code>href</code> 属性</a></li><li class="h3 ng-star-inserted" title="ng-if"><a href="guide/ajs-quick-reference#ng-if">ng-if</a></li><li class="h3 ng-star-inserted" title="*ngIf"><a href="guide/ajs-quick-reference#ngif">*ngIf</a></li><li class="h3 ng-star-inserted" title="ng-model"><a href="guide/ajs-quick-reference#ng-model">ng-model</a></li><li class="h3 ng-star-inserted" title="ngModel"><a href="guide/ajs-quick-reference#ngmodel">ngModel</a></li><li class="h3 ng-star-inserted" title="ng-repeat"><a href="guide/ajs-quick-reference#ng-repeat">ng-repeat</a></li><li class="h3 ng-star-inserted" title="*ngFor"><a href="guide/ajs-quick-reference#ngfor">*ngFor</a></li><li class="h3 ng-star-inserted" title="ng-show"><a href="guide/ajs-quick-reference#ng-show">ng-show</a></li><li class="h3 ng-star-inserted" title="绑定到 hidden 属性"><a href="guide/ajs-quick-reference#bind-to-the-hidden-property-1">绑定到 <code>hidden</code> 属性</a></li><li class="h3 ng-star-inserted" title="ng-src"><a href="guide/ajs-quick-reference#ng-src">ng-src</a></li><li class="h3 ng-star-inserted" title="绑定到 src 属性"><a href="guide/ajs-quick-reference#bind-to-the-src-property">绑定到 <code>src</code> 属性</a></li><li class="h3 ng-star-inserted" title="ng-style"><a href="guide/ajs-quick-reference#ng-style">ng-style</a></li><li class="h3 ng-star-inserted" title="ngStyle"><a href="guide/ajs-quick-reference#ngstyle">ngStyle</a></li><li class="h3 ng-star-inserted" title="ng-switch"><a href="guide/ajs-quick-reference#ng-switch">ng-switch</a></li><li class="h3 ng-star-inserted" title="ngSwitch"><a href="guide/ajs-quick-reference#ngswitch">ngSwitch</a></li><li class="h2 ng-star-inserted" title="过滤器/管道"><a href="guide/ajs-quick-reference#filterspipes">过滤器/管道</a></li><li class="h3 ng-star-inserted" title="currency"><a href="guide/ajs-quick-reference#currency">currency</a></li><li class="h3 ng-star-inserted" title="currency"><a href="guide/ajs-quick-reference#currency-1">currency</a></li><li class="h3 ng-star-inserted" title="date"><a href="guide/ajs-quick-reference#date">date</a></li><li class="h3 ng-star-inserted" title="date"><a href="guide/ajs-quick-reference#date-1">date</a></li><li class="h3 ng-star-inserted" title="filter"><a href="guide/ajs-quick-reference#filter">filter</a></li><li class="h3 ng-star-inserted" title="没了"><a href="guide/ajs-quick-reference#none">没了</a></li><li class="h3 ng-star-inserted" title="json"><a href="guide/ajs-quick-reference#json">json</a></li><li class="h3 ng-star-inserted" title="json"><a href="guide/ajs-quick-reference#json-1">json</a></li><li class="h3 ng-star-inserted" title="limitTo"><a href="guide/ajs-quick-reference#limitto">limitTo</a></li><li class="h3 ng-star-inserted" title="slice"><a href="guide/ajs-quick-reference#slice">slice</a></li><li class="h3 ng-star-inserted" title="lowercase"><a href="guide/ajs-quick-reference#lowercase">lowercase</a></li><li class="h3 ng-star-inserted" title="lowercase"><a href="guide/ajs-quick-reference#lowercase-1">lowercase</a></li><li class="h3 ng-star-inserted" title="number"><a href="guide/ajs-quick-reference#number">number</a></li><li class="h3 ng-star-inserted" title="number"><a href="guide/ajs-quick-reference#number-1">number</a></li><li class="h3 ng-star-inserted" title="orderBy"><a href="guide/ajs-quick-reference#orderby">orderBy</a></li><li class="h3 ng-star-inserted" title="没了"><a href="guide/ajs-quick-reference#none-1">没了</a></li><li class="h2 ng-star-inserted" title="模块/控制器/组件"><a href="guide/ajs-quick-reference#modulescontrollerscomponents">模块/控制器/组件</a></li><li class="h3 ng-star-inserted" title="IIFE"><a href="guide/ajs-quick-reference#iife">IIFE</a></li><li class="h3 ng-star-inserted" title="没了"><a href="guide/ajs-quick-reference#none-2">没了</a></li><li class="h3 ng-star-inserted" title="Angular 模块"><a href="guide/ajs-quick-reference#angular-modules">Angular 模块</a></li><li class="h3 ng-star-inserted" title="NgModules"><a href="guide/ajs-quick-reference#ngmodules">NgModules</a></li><li class="h3 ng-star-inserted" title="控制器注册"><a href="guide/ajs-quick-reference#controller-registration">控制器注册</a></li><li class="h3 ng-star-inserted" title="组件装饰器"><a href="guide/ajs-quick-reference#component-decorator-1">组件装饰器</a></li><li class="h3 ng-star-inserted" title="控制器函数"><a href="guide/ajs-quick-reference#controller-function">控制器函数</a></li><li class="h3 ng-star-inserted" title="组件类"><a href="guide/ajs-quick-reference#component-class">组件类</a></li><li class="h3 ng-star-inserted" title="依赖注入"><a href="guide/ajs-quick-reference#dependency-injection">依赖注入</a></li><li class="h3 ng-star-inserted" title="依赖注入"><a href="guide/ajs-quick-reference#dependency-injection-1">依赖注入</a></li><li class="h2 ng-star-inserted" title="样式表"><a href="guide/ajs-quick-reference#style-sheets">样式表</a></li><li class="h3 ng-star-inserted" title="Link 标签"><a href="guide/ajs-quick-reference#link-tag">Link 标签</a></li><li class="h3 ng-star-inserted" title="样式配置"><a href="guide/ajs-quick-reference#styles-configuration">样式配置</a></li><li class="h3 ng-star-inserted" title="StyleUrls"><a href="guide/ajs-quick-reference#styleurls">StyleUrls</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.79+sha.55f1ef01.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.ee607cf78010348c8334.js" type="module"></script><script src="runtime-es5.ee607cf78010348c8334.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.9cd62e243bd182514a19.js" type="module"></script><script src="main-es5.9cd62e243bd182514a19.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>